<div class="row gap-20 masonry pos-r">
	<div class="masonry-sizer col-md-12"></div>
	<div class="masonry-item col-md-12">
		<div class="bgc-white p-20 bd">
			<h6 class="c-grey-900" th:text="#{query.admin.vip.time}"></h6>
			<div class="mT-30">
				<form id="queryVipTimeForm" name="queryVipTimeForm" role="form"	th:action="@{/queryVipTime}" method="post" >
					 
					 <input type='hidden' id="minTimeSeconds" name="minTimeSeconds">
					 <input type='hidden' id="maxTimeSeconds" name="maxTimeSeconds">

					<div class="form-row">
						<div class="form-group col-md-3">
							<label for="timeRangeMin" th:text="#{form.query.vip.time.min}"></label> 
							<span id="timemin_span" class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill"></span> 
							<input type="time" class="form-control" id="minTime" name="minTime" step="1" required>
						</div>
						<div class="form-group col-md-3">
							<label for="timeRangeMax" th:text="#{form.query.vip.time.max}"></label> 
							<span id="timemax_span" value="" class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill"></span> 
							<input type="time" class="form-control" id="maxTime" name="maxTime" step="1" required>
						</div>
						<div class="form-group col-md-3"><label for="system" th:text="#{form.query.vip.system}"></label>
							 <select id="system" name="system" class="form-control">
									<option selected="selected" value="" th:text="#{form.service.select.platform}"></option>
									<option th:each="s: ${systems}" th:value="${s.name}" th:text="${s.name}"></option>
							</select>
						</div>
						<div class="form-group col-md-3">
							<label for="service" th:text="#{form.query.vip.service}"></label>
							<input type="text" class="form-control" id="service" name="service">
						</div>
					</div>

					<button id="queryVipTimeBtn" type="submit" class="btn btn-primary"
						th:text="#{button.query.vip}"></button>
					<button id="cleanQueryVipTimeBtn" class="btn btn-primary"
						onclick="cleanForm('#queryVipTimeForm');" th:text="#{button.cleanForm}"></button>
				</form>
			</div>
		</div>

		<div id="queryVipTableDiv"></div>
	</div>
	
	
</div>

<script th:inline="javascript">
	function timeToSecondsOfDay(s){
		var numValue =  s;
		
		if (numValue.indexOf(':') != -1){
			var splitValue = numValue.split(':');
			var finalValue = 0;
			if (splitValue.length == 2){
				finalValue = (+splitValue[0]) * 60 * 60 + (+splitValue[1]) * 60;
			} else if (splitValue.length == 3){
				finalValue = (+splitValue[0]) * 60 * 60 + (+splitValue[1]) * 60 + (+splitValue[2]);
			}
			
		}else{
			finalValue = numValue;
		}
		
		
		return finalValue;
	}
	
	function checkTypeTime(id){
		var numValue =  $(id).val();
		if (numValue.indexOf(':') != -1){
			var splitValue = numValue.split(':');
			if (splitValue.length == 2){
				numValue += ":00"
			}
		}
		return numValue;
	}
	
	$( "#queryVipTimeBtn" ).click(function( event ) {
		  hide();
	
		  event.preventDefault();
		  
		  if ($("#queryVipTimeForm")[0].checkValidity()) {
			  
			  $('#queryVipTimeForm *').filter(':input').each(function(){
				  $("#" + $(this).attr('id')).removeClass("has-error");
			  });
				  			  
			  var minTime = checkTypeTime($('#minTime'));
			  var maxTime = checkTypeTime($('#maxTime'));
			  
			  if (minTime != $('#minTime').val()){
			    $("#minTime").val(minTime);
			  }
				
			  $("#minTimeSeconds").val(timeToSecondsOfDay(minTime));
			  
			  if (maxTime != $('#maxTime').val()){
				    $("#maxTime").val(maxTime);
			  }
					
			  $("#maxTimeSeconds").val(timeToSecondsOfDay(maxTime));
			  
			  var actionQuery = /*[[@{/queryviptime}]]*/;
			  loadIntoAjax('queryVipTimeForm', actionQuery, 'queryVipTableDiv', 'GET', null, true);
		  }	else {
		  
			$('#queryVipTimeForm *').filter(':input').each(function(){
		      	    
		          if(!$(this)[0].checkValidity()){
		      	   	$("#" + $(this).attr('id')).addClass("has-error");
		      	  } else {
		      	   	$("#" + $(this).attr('id')).removeClass("has-error");
		      	  }
	      	    
	      	  });
		   }  
			 
	});
</script>